<div style="width:525px; height:550px; margin-left:30px; background-color:#fff;">
  <div id="pages" style="width:485px; padding:15px 20px 20px;">
    <form id="form-contact" method="post" action="<?php e($this->base); ?>/<?php e($this->params['controller']); ?>/contact" onsubmit="return send();">
    <h1><?php __('Contact Us'); ?></h1>
    <div style="margin-top:18px;"><span style="font-family: Georgia,Times New Roman,Times,serif; font-size:12px; line-height:18px;">
      Care Latex Sdn Bhd<br />
      Email: info@carelatex.com<br />
      CARE is a registered trademark of CARE LATEX Sdn. Bhd.<br /><br />
      2006 CARE LATEX  Sdn.Bhd. All rights reserved.
      <div style="border-top:2px solid #DCDDDF; margin:10px 0;"></div>

      <label>Enter your name:</label>
      <div style="margin:1px 0 3px;"><input type="text" name="name" class="input req" /></div>

      <label>E-mail address:</label>
      <div style="margin:1px 0 3px;"><input type="text" name="email" class="input req" /></div>

      <label>Message Subject:</label>
      <div style="margin:1px 0 18px;"><input type="text" name="subject" class="input" /></div>

      <label>Enter your Message:</label>
      <div style="margin:1px 0 3px;"><textarea rows="6" cols="45" name="message" style="height:113px;"></textarea></div>
      <input type="checkbox" name="emailme" value="Y" /> E-mail a copy of this message to your own address.
      <input type="submit" value="Send" style="margin-top:20px; display:block;" />
    </span></div>
    </form>
  </div>
</div>

<script type="text/javascript">
function send () {
    var message = Ext.get('message');
    var focuson = '';

    if (validation('form-contact') == false) {
        message.update('Please enter required information.');
        message.addClass('error').highlight();
        return false;
    }

    transId = Ext.Ajax.request({
        form: 'form-contact',
        success: function(response, opts) {
            var obj = Ext.decode(response.responseText);
            if (obj.status == false) {
                if (obj.mesg) {
                    message.update(obj.mesg);
                    message.addClass('error').slideIn().highlight();
                }
            } else {
                if (obj.mesg) {
                    message.hide().update(obj.mesg);
                    message.addClass('success').slideIn().highlight().pause(5).slideOut('t', { useDisplay:true });
                }
                clearForm();
            }
        },
        failure: function(response, opts) {
            message('server-side failure with status code '+response.status);
        },
        callback: function() {
            Ext.fly('status').slideOut('t', {
                easing: 'easeOut',
                useDisplay: true
            });
            Ext.each(Ext.query('input[type=submit],input[type=reset]', 'form-contact'), function(e){ e.disabled = false; });
        }
    });

    if (Ext.Ajax.isLoading(transId)) {
        Ext.each(Ext.query('input[type=submit],input[type=reset]', 'form-contact'), function(e){ e.disabled = true; });
        Ext.fly('status').update('Sending..');
        Ext.fly('status').slideIn('t', {
            easing: 'easeOut'
        });
    }

    return false;
} // send

function clearForm () {
    Ext.each(Ext.query('input[type=text],input[type=hidden],textarea', 'form-contact'), function(e){
        e.value = '';
    });
} // clearForm

function cleanError (form) {
    Ext.fly('message').setStyle({ display:'none' }).removeClass('error');
    Ext.select('.invalid', false, form).removeClass('invalid');
    Ext.select('div.invalidField', false, form).remove();
    Ext.select('.invalidText', false, form).removeClass('invalidText');
} // cleanError

function validation (form) {
    var proceed = true;
    var focuson = '';

    cleanError(form);
    Ext.each(Ext.select('.req', false, form).elements, function(e){
        var el = Ext.get(e);

        if (!el.getValue() || el.getValue() == 'select..') {
            proceed = false;
            el.addClass('invalid');
            el.up('div').prev('label').addClass('invalidText');

            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
        }
    });

    return proceed;
} // validation

function errorFields (error) {
    var focuson = '';

    Ext.each(error, function(e) {
        var el  = Ext.get(e.id);
        var err = '<div class="invalidField" style="display:none;">'+e.code+'</div>';
            el.addClass('invalid');
            el.prev('td').addClass('invalidText');
            el.insertHtml('afterEnd', err);
            el.next('div.invalidField').slideIn('t', {
                duration:.4
            });
            if (e.clear) {
                el.dom.value = '';
            }
            if (!focuson) {
                focuson = e.id;
                el.focus();
                el.fadeIn({
                    duration: 2.0
                });
            }
    });
} // errorFields
</script>